<template>
  <van-form @submit="onSubmit" v-if="needLogin">
    <van-cell-group inset>
      <van-field
          v-model="username" maxlength="16"
          name="账号"
          label="账号"
          placeholder="账号"
          :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
          v-model="password" maxlength="16"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="captcha" maxlength="16"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请输入验证码' } ]">

      </van-field>
      <img :src="captcha_url" style=" display: inline-block;  position: relative; width: 60%;
    top: 0;
    bottom: 0;" alt="验证码"/>
      <van-button size="mini" plain type="success" @click="nextImg">换一张</van-button>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

</template>
<script>
import {img_svg} from "@/js/res";
import dhPublicKey, {doExchange} from "@/js/dh";
import {get, postP} from "@/js/axios_util";
import {getLoginErrorMsg} from "@/js/error_code";
import {showToast} from 'vant';
import switch_page from "@/js/switch_page";
import {initSettings} from "@/js/sysSettings";


const currentUser = "currentUser";
export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: '',
      captcha: '',
      captcha_url: img_svg,
      needLogin: false
    }
  }
  , methods: {
    onSubmit() {
      doExchange((keyAgreeResult, aesEncode) => {
        let loginData = {
          account: aesEncode(this.username, keyAgreeResult.secret),
          password: aesEncode(this.password, keyAgreeResult.secret),
          captcha: aesEncode(this.captcha, keyAgreeResult.secret),
        }

        this.captcha = '';
        postP('/login/doLogin', loginData, {
          headers: {
            exchangeSessionId: keyAgreeResult.exchangeSessionId,
            publicKey: keyAgreeResult.publicKey
          }
        }, resp => {
          let data = resp.data;
          if (data.success) {
            let user = JSON.stringify(data.result.user);
            localStorage.setItem(currentUser, user);
            localStorage.setItem(dhPublicKey, JSON.stringify(data.result.dhPublicKey));
            this.password = '';
            switch_page.switchPageTo(switch_page.m.dev_list, {})
            initSettings();
            return
          }
          const reason = getLoginErrorMsg(data.statusCode);
          showToast(`登录失败[${reason}]`);
          this.nextImg();

        })
      })

    }, nextImg() {
      let url = '/login/captcha';
      if (process.env.NODE_ENV === 'development') {
        url = window.dev.httpUrlBase + url;
      }
      this.captcha_url = url
      //刷新vue
      this.captcha_url_switch = this.captcha_url_switch ? 0 : 1;
      this.captcha_url = url + "?new=" + this.captcha_url_switch;
    }
  }, created() {
    let currentUser = localStorage.getItem('currentUser');
    if (currentUser) {
      get('/login/isLogin', resp => {
        if (resp.data) {
          initSettings();
          switch_page.switchPageTo(switch_page.m.dev_list, {})
        } else {
          this.needLogin = true;
        }
      }, () => {
        this.needLogin = true;
      })
    } else {
      this.needLogin = true;
    }


    let captcha_url = '/login/captcha';
    if (process.env.NODE_ENV === 'development') {
      captcha_url = window.dev.httpUrlBase + captcha_url;
    }
    this.captcha_url = captcha_url;
  }
}
</script>